<template>
  <div class="license-plate-input">
    <div class="plate-container">
      <!-- 省份简称 -->
      <div v-for="(char, index) in plateChars.slice(0, 1)" :key="index" class="char-box province"
        :class="{ focused: focusedIndex === index }" @click="focusInput(index)">
        <span v-if="char">{{ char }}</span>
        <span v-else class="placeholder">省</span>
      </div>

      <!-- 分隔符 -->
      <div class="separator">●</div>

      <!-- 字母和数字 -->
      <div v-for="(char, index) in plateChars.slice(1)" :key="index + 1" class="char-box" :class="{
        focused: focusedIndex === index + 1,
        newEnergy: newEnergyType && index + 1 === plateChars.length - 1
      }" @click="focusInput(index + 1)">
        <span v-if="char">{{ char }}</span>
        <span v-else class="placeholder">{{ index === 0 ? 'A' : '_' }}</span>
      </div>
    </div>

    <!-- 键盘区域 -->
    <div class="keyboard" v-show="showKeyboard">
      <div class="keyboard-header">
        <button @click="switchKeyboard('province')" :class="{ active: keyboardType === 'province' }">省份</button>
        <button @click="switchKeyboard('letters')" :class="{ active: keyboardType === 'letters' }">字母</button>
        <button @click="switchKeyboard('numbers')" :class="{ active: keyboardType === 'numbers' }">数字</button>
        <button @click="switchKeyboard('special')" v-if="newEnergyType"
          :class="{ active: keyboardType === 'special' }">新能源</button>
      </div>

      <div class="keyboard-keys">
        <div v-for="key in keys" :key="key" class="key" @click="inputChar(key)">
          {{ key }}
        </div>
        <div class="key delete" @click="deleteChar">
          <i class="fa fa-backspace"></i>
        </div>
        <div class="key clear" @click="clearAll">
          <i class="fa fa-refresh"></i>
        </div>
      </div>
    </div>

    <!-- 新能源类型选择 -->
    <div class="new-energy-selector" v-if="!newEnergyType && plateChars.length === 7">
      <p>请选择车牌类型:</p>
      <button @click="setNewEnergyType(false)">普通车牌 (7位)</button>
      <button @click="setNewEnergyType(true)">新能源车牌 (8位)</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits } from 'vue'

const props = defineProps<{
  modelValue: string
  disabled?: boolean
  newEnergy?: boolean
}>()

const emits = defineEmits<{
  (e: 'update:modelValue', value: string): void
}>()

// 状态管理
const plateChars = ref(props.modelValue.split(''))
const focusedIndex = ref(-1)
const showKeyboard = ref(false)
const keyboardType = ref('province')
const newEnergyType = ref(props.newEnergy || false)

// 省份简称
const provinces = ['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁', '新']
// 字母
const letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
// 数字和字母
const numbersAndLetters = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
// 新能源专用字符
const newEnergyChars = ['D', 'F']

// 当前键盘按键
const keys = computed(() => {
  switch (keyboardType.value) {
    case 'province': return provinces
    case 'letters': return letters
    case 'special': return newEnergyChars
    default: return numbersAndLetters
  }
})

// 聚焦输入框
const focusInput = (index: number) => {
  if (props.disabled) return
  focusedIndex.value = index
  showKeyboard.value = true
}

// 输入字符
const inputChar = (char: string) => {
  if (focusedIndex.value === -1 || props.disabled) return

  // 限制长度
  if (newEnergyType.value && plateChars.value.length >= 8) return
  if (!newEnergyType.value && plateChars.value.length >= 7) return

  // 第一位必须是省份
  if (focusedIndex.value === 0 && !provinces.includes(char)) return

  // 更新字符
  if (focusedIndex.value < plateChars.value.length) {
    plateChars.value[focusedIndex.value] = char
  } else {
    plateChars.value.push(char)
  }

  // 自动聚焦下一个
  if (focusedIndex.value < (newEnergyType.value ? 7 : 6)) {
    focusedIndex.value++
  } else {
    focusedIndex.value = -1
    showKeyboard.value = false
  }

  // 触发更新
  emits('update:modelValue', plateChars.value.join(''))
}

// 删除字符
const deleteChar = () => {
  if (focusedIndex.value === -1 || props.disabled) return

  if (focusedIndex.value < plateChars.value.length) {
    // 删除当前位置字符
    plateChars.value.splice(focusedIndex.value, 1)
  } else if (plateChars.value.length > 0) {
    // 删除最后一个字符
    plateChars.value.pop()
  }

  // 如果删除后索引超出范围，调整索引
  if (focusedIndex.value >= plateChars.value.length && plateChars.value.length > 0) {
    focusedIndex.value = plateChars.value.length - 1
  } else if (plateChars.value.length === 0) {
    focusedIndex.value = -1
  }

  emits('update:modelValue', plateChars.value.join(''))
}

// 清空所有
const clearAll = () => {
  if (props.disabled) return
  plateChars.value = []
  focusedIndex.value = -1
  emits('update:modelValue', '')
}

// 切换键盘类型
const switchKeyboard = (type: string) => {
  keyboardType.value = type
}

// 设置新能源类型
const setNewEnergyType = (isNewEnergy: boolean) => {
  newEnergyType.value = isNewEnergy
  emits('update:modelValue', plateChars.value.join(''))
}

// 监听外部值变化
watch(() => props.modelValue, (newVal) => {
  plateChars.value = newVal.split('')
})
</script>

<style scoped>
.license-plate-input {
  font-family: 'Inter', sans-serif;
  max-width: 400px;
  margin: 0 auto;
}

.plate-container {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
}

.char-box {
  width: 40px;
  height: 60px;
  border: 2px solid #ccc;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: bold;
  background-color: white;
  transition: all 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.char-box.province {
  background-color: #f5f7fa;
}

.char-box.focused {
  border-color: #4285f4;
  box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.3);
  transform: scale(1.05);
}

.char-box.newEnergy {
  border-color: #0f9d58;
}

.placeholder {
  color: #aaa;
}

.separator {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #555;
  padding: 0 4px;
}

.keyboard {
  background-color: #f8f9fa;
  border-radius: 8px;
  padding: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 16px;
  animation: fadeIn 0.3s ease-out;
}

.keyboard-header {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.keyboard-header button {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: #e9ecef;
  cursor: pointer;
  transition: background-color 0.2s;
}

.keyboard-header button.active {
  background-color: #4285f4;
  color: white;
}

.keyboard-keys {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.key {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  background-color: white;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.key:hover {
  background-color: #f5f5f5;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.key.delete,
.key.clear {
  background-color: #e9ecef;
  color: #555;
}

.new-energy-selector {
  margin-top: 16px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.new-energy-selector button {
  margin-right: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background-color: #4285f4;
  color: white;
  cursor: pointer;
  transition: background-color 0.2s;
}

.new-energy-selector button:hover {
  background-color: #3367d6;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>